<template>
  <div id="app3">
    <form-create v-model="fApi" :rule="rule" @table-handle-click="tableHandleClick" :option="option"></form-create>
    <el-dialog :visible.sync="formPreviewVisible">
      <form-create v-model="fApi2" :rule="previewRule" @button-handle-click="buttonHandleClick" :option="option"></form-create>
    </el-dialog>
  </div>
</template>

<script>
  import {generatorApi} from "../../http/modules/generator";
  import {formApi} from "../../http/modules/form";
  import {dictApi} from "../../http/modules/dict";

  export default {
    name: "design",
    data() {
      return {
        fApi: {},
        fApi2: {},
        rule: [],
        previewRule: [],
        option: {
          row: {
            gutter: 10
          },
          form: {
            labelWidth: '84px'
          },
          submitBtn: {
            show: false
          },
        },
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        formPreviewVisible: false // 表单预览
      }
    },
    methods: {
      sexFocus() {
        if (this.fApi.getRule('sex').options.length === 0) {
          dictApi.getValue({type: 'sex'}).then(res => {
            let optionsValue = res.data
            optionsValue.forEach(item => {
              let option = {
                "value": item.value,
                "label": item.label,
                "disabled": false
              }
              this.fApi.getRule('sex').options.push(option)
            })
            this.fApi.getRule('sex').props.loading = false
          })
        }
      },
      getRule() {
        generatorApi.getFormJson({formName: 'formManage'}).then(res => {
          this.rule = JSON.parse(res.msg)
          this.findByPage()
        })
      },
      findByPage() {
        formApi.findPage(this.pageRequest).then(res => {
          this.fApi.getRule('table').props.tableData = res.data.content
        }).catch(error => {
          this.$message.error('网络错误')
        })
      },
      tableHandleClick(data, type, index) {
        if (type === 'preview') {
          this.preview(data)
        }
        else if (type === 'editor') {

        }
      },
      preview(data) {
        this.formPreviewVisible = true
        this.previewRule = JSON.parse(data.formData)
      },
      buttonHandleClick() {
        console.log(this.fApi2.getValue("input"))
      }
    },
    created() {
      this.getRule()
    }
  }
</script>

<style scoped>

</style>
